// Time series plot for selected country
countryTimeSeries = {
const countryData = country_ts_dict[selectedCountry] || [];
if (countryData.length === 0) {
return html`<p>No time series data available for ${selectedCountry}</p>`
}
const plot = Plot.plot({
title: `${selectedCountry} - Measles Incidence Over Time`,
width: 380,
height: 300,
marginLeft: 60,
marginBottom: 60,
x: {
label: "Year",
domain: d3.extent(countryData, d => d.year),
tickFormat: "d"
},
y: {
label: "Incidence Rate (per 1M)",
domain: [0, d3.max(countryData, d => d.measles_incidence_rate) * 1.1]
},
color: {
legend: true
},
marks: [
Plot.areaY(countryData, {
x: "year",
y: "measles_incidence_rate",
fill: "#FC8D59",
fillOpacity: 0.3
}),
Plot.line(countryData, {
x: "year",
y: "measles_incidence_rate",
stroke: "#E34A33",
strokeWidth: 3
}),
Plot.dot(countryData, {
x: "year",
y: "measles_incidence_rate",
r: d => Math.sqrt(d.measles_total || 0) / 15 + 3,
fill: "#B30000",
stroke: "white",
strokeWidth: 2,
title: d => `${d.year}: ${d.measles_incidence_rate} per 1M\n${(d.measles_total || 0).toLocaleString()} total cases`
}),
Plot.ruleY([0], {stroke: "#666", strokeDasharray: "2,2"}),
Plot.ruleX([selectedYear], {stroke: "#3498db", strokeWidth: 2, strokeDasharray: "5,5"})
]
})
return plot
}